<template>
    <div class="eachart-box">
        <div id="pie-box" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
      name: '',
      data(){
        return {
          charts: ''
        }
      },
      props: ['sevenDate', 'sevenDay'],
      mounted(){
        var that = this;
        this.$nextTick(function() {
            that.myChart = echarts.init(document.getElementById('pie-box'));
            that.initData();
        })
      },
      methods: {
        initData(){
            const option = {
                title : {
                    text: '性别分析',
                    textStyle: {
                      fontSize: 12
                    }
                },
                color: ['#3dc9cc','#f5c941'],
                legend: {
                    orient : 'horizontal',
                    x : 'center',
                    y : 'top',
                    data:['男','女']
                },
                calculable : true,
                series : [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        itemStyle : {
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },
                        data:[
                            {value:335, name:'男'},
                            {value:310, name:'女'}
                        ]
                    }
                ]
            };
            this.myChart.setOption(option);
        }
      },
      watch: {
          sevenDate: function (){
              this.initData()
          },
          sevenDay: function (){
              this.initData()
          }
      }
    }
</script>

<style lang="less" scoped>
    .eachart-box{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
